<template>
  <div class="product-type-container">
    <!-- 搜索区 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="form" class="search-form">
        <el-form-item label="类型名称">
          <el-input v-model="form.name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchCategory">搜索</el-button>
        </el-form-item>
        <el-button type="primary" @click="handleAdd">新增类型</el-button>
      </el-form>
    </el-card>

    <el-card>
      <el-table :data="typeList" border stripe>
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="categoryName" label="类型名称" />
        <el-table-column label="状态" width="100">
          <template #default="scope">
            {{ getStatusText(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @current-change="handlePageChange"
          :current-page="pageNum"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next, total"
        />
      </div>
    </el-card>

    <!-- 类型表单弹窗 -->
    <el-dialog v-model="formVisible" title="产品类型">
      <el-form :model="formRef" label-width="80px">
        <el-form-item label="类型名称" prop="name" :rules="{ required: true, message: '请输入类型名称' }">
          <el-input v-model="formRef.name" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="formRef.status">
            <el-radio label="0">禁用</el-radio>
            <el-radio label="1">启用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="formVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveType">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { deleteProductType, getProductTypes, saveProductType, fetchTypesByName, updateProductType } from '@/api/product'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'

const typeList = ref([])
const formVisible = ref(false)
const flag = ref(false)
const formRef = reactive({
  name: '',
  status: '0' // 默认禁用
})
const form = reactive({
  name: ''
})
const saveBO = {
  id: 0,
  categoryName: '',
  status: 0
}
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 状态映射函数
const getStatusText = (status) => {
  return status === 1 ? '启用' : '禁用'
}

// 查询
const fetchCategory = () => {
  pageNum.value = 1
  if (!form.name) {
    fetchTypes()
    return
  }
  fetchTypesByName({
    categoryName: form.name,
    pageNo: pageNum.value,
    pageSize: pageSize.value
  }).then((res) => {
    typeList.value = res.data.records
    total.value = res.data.total
  })
}

// 获取类型列表
const fetchTypes = async () => {
  const res = await getProductTypes({
    bo: {},
    pageNo: pageNum.value,
    pageSize: pageSize.value
  })
  typeList.value = res.data.records
  total.value = res.data.total
}

// 分页变化
const handlePageChange = (page) => {
  pageNum.value = page
  fetchTypes()
}

// 新增类型
const handleAdd = () => {
  formRef.name = ''
  formRef.status = '0'
  formVisible.value = true
  flag.value = false
}

// 编辑类型
const handleEdit = (row) => {
  formRef.name = row.categoryName
  formRef.status = String(row.status)
  formVisible.value = true
  flag.value = true
  saveBO.id = row.id
  saveBO.status = row.status
}

// 保存类型
const handleSaveType = async () => {
  saveBO.categoryName = formRef.name
  saveBO.status = parseInt(formRef.status)

  if (flag.value) {
    await updateProductType(saveBO.id, saveBO)
    ElMessage.success('更新成功')
  } else {
    await saveProductType(saveBO)
    ElMessage.success('保存成功')
  }
  formVisible.value = false
}

// 删除类型
const handleDelete = async (id) => {
  await deleteProductType(id)
  ElMessage.success('删除成功')
  fetchTypes()
}

onMounted(() => {
  fetchTypes()
})
</script>

<style scoped>
.product-type-container {
  padding: 20px;
  background-color: #f5f7fa;
  height: 100%;
  width: 100%;
}

.search-card {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}
</style>
